<!doctype html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org"
      th:replace="layout (title='合同查验')">
<div th:fragment="content" id="app">
    <div class="m2ban wOpacity wow fadeIn" data-wow-delay="0.0s" style="background-image:url(images/m2ban2.jpg)">
        <div class="m2banTxt">
            <div class="m2ban_t1 wOpacity wow fadeInUp" data-wow-delay="0.2s">合同查验</div>
            <div class="m2ban_des1 wOpacity wow fadeInUp" data-wow-delay="0.4s">验证合同有效性</div>
        </div>
    </div>
    <div class="container wOpacity wow fadeIn" data-wow-delay="0.0s" id="app">
        <div class="m2htCon1">
            <div class="m2pub_t wOpacity wow fadeIn" data-wow-delay="0.1s">电子验签流程</div>
            <ul class="m2htul clearfix">
                <li class="col-xs-12 col-sm-12 col-md-4 wOpacity wow fadeIn" data-wow-delay="0.1s">
                    <span class="m2htIcon"><img src="images/m2ht_i1.png" width="40" height="40"></span>
                    <strong>第一步：下载合同</strong>
                    <p>登录众签平台，点击合同管理，下载需要验签的合同
                        文件（同时支持验证从第三方平台下载的合同）</p>
                </li>
                <li class="col-xs-12 col-sm-12 col-md-4 wOpacity wow fadeIn" data-wow-delay="0.2s">
                    <span class="m2htIcon"><img src="images/m2ht_i2.png" width="40" height="40"></span>
                    <strong>第二步：上传PDF文件</strong>
                    <p>将合同PDF文件拖拽至上传区域内，或点击“上传区域”
                        上传文件</p>
                </li>
                <li class="col-xs-12 col-sm-12 col-md-4 wOpacity wow fadeIn" data-wow-delay="0.3s">
                    <span class="m2htIcon"><img src="images/m2ht_i3.png" width="40" height="40"></span>
                    <strong>第三步：完成验签，查看结果</strong>
                    <p>查看验签结果</p>
                </li>
            </ul>
        </div>
        <div class="m2pub_t wOpacity wow fadeIn" data-wow-delay="0.2s">电子合同查验</div>
        <div class="m2htUpbox wOpacity wow fadeIn" data-wow-delay="0.3s">
            <input id="uploadImg" type="file" name="uploadImg" style="display: none" />
            <a href="javascript:;" class="m2htUpBtn" id="chooseFile"><img src="images/m2ht_ui.png" width="24" height="17"> 上传pdf合同文件</a>
            <a href="javascript:;" class="m2htCd cor_bs" id="uploadFile">验签</a>
        </div>


        <div class="m2htlayBg dsNone" id="layerBg"></div>
        <div class="m2htLayer2 dsNone" id="layerBg1">
            <img src="images/m2ht_bi.png" width="69" height="80">
            <p class="m2htLp1">验签失败</p>
            <p class="m2htLp2">不是有效的合同文件</p>
            <div class="m2htLbtns">
                <a href="javascript:;" class="m2htLbtn1">取消</a>
                <a href="javascript:;" id="rechooseFile" class="m2htLbtn2">重新上传</a>
            </div>
        </div>
    </div>
    <link href="jQuery-File-Upload/css/jquery.fileupload.css" rel="stylesheet" />
    <link href="jQuery-File-Upload/css/jquery.fileupload-ui.css" rel="stylesheet" />
    <script src="jQuery-File-Upload/js/vendor/jquery.ui.widget.js"></script>
    <script src="jQuery-File-Upload/js/jquery.iframe-transport.js"></script>
    <script src="jQuery-File-Upload/js/jquery.fileupload.js"></script>
    <script th:inline="javascript">
        $(function() {
            $("#checkLi").addClass("hover");
            $("#uploadFile").on("click",function(){
                if($("#uploadImg").val() == ""){
                    alert("请上传PDF文件")
                }
            })

            $("#chooseFile").on("click", function() {
                $("#uploadImg").click();
            });

            $('#uploadImg').fileupload({
                url : '/uploadFile',//请求发送的目标地址
                Type : 'POST',//请求方式 ，可以选择POST，PUT或者PATCH,默认POST
                autoUpload : false,
                acceptFileTypes : /(gif|jpe?g|png)$/i,//验证图片格式
                maxNumberOfFiles : 1,//最大上传文件数目
                maxFileSize : 5000000, // 文件上限5MB
                minFileSize : 100,//文件下限  100b
                messages : {//文件错误信息
                    acceptFileTypes : '文件类型不匹配',
                    maxFileSize : '文件过大',
                    minFileSize : '文件过小'
                }
            })
            //图片添加完成后触发的事件
                .on("fileuploadadd", function(e, data) {
                    $("#uploadFile").off("click");
                    validate(data.files[0])

                    //绑定开始上传事件
                    $('#uploadFile').click(function() {
                        jqXHR = data.submit();
                        //解绑，防止重复执行
                        $("#uploadFile").off("click");
                    })

                    //绑定点击重选事件
                    $("#rechooseFile").click(function(){
                        $("#uploadImg").click();
                        //解绑，防止重复执行
                        $("#rechooseFile").off("click");
                    })
                })
                //上传请求失败时触发的回调函数
                .on("fileuploadfail", function(e, data) {
                    console.log(data.errorThrown);
                })
                //上传请求成功时触发的回调函数
                .on("fileuploaddone", function(e, res) {
                    var base64 = res.result.data.base64;
                    var url = res.result.data.url;
                    $.post(url, {"contractFile": base64}, function (data) {
                        if (data != null && data.resultCode == "1") {
                            var form1 = document.createElement("form");
                            form1.id = "form1";
                            form1.name = "form1";

                            // 添加到 body 中
                            document.body.appendChild(form1);

                            // 创建一个输入
                            var input1 = document.createElement("input");
                            // 设置相应参数
                            input1.type = "text";
                            input1.name = "jsonString";
                            input1.value = data;

                            // 将该输入框插入到 form 中
                            form1.appendChild(input1);


                            // form 的提交方式
                            form1.method = "POST";
                            // form 提交路径
                            form1.action = "/checkSuccess";

                            // 对该 form 执行提交
                            form1.submit();
                            // 删除该 form
                            document.body.removeChild(form1);
                        } else {
                            $(".m2htlayBg,.m2htLayer2").fadeIn(300);
                        }
                    });
                })

            //手动验证
            function validate(file) {
                //获取文件名称
                var fileName = file.name;
                var fix = fileName.substr(fileName.indexOf(".")+1);
                //验证图片格式
                if (fix != "pdf") {
                    alert("请上传PDF文件");
                    return true;
                }

                //获取文件大小
                var fileSize = file.size;
                if (fileSize > 1024 * 1024 * 5) {
                    alert("文件不得大于5兆")
                    return true;
                }
                return false;
            }

        });

        $(function () {
            $("#checkLi").addClass("hover");
            //弹出层进入、退出操作
            $(".m2htLbtn1").click(function () {
                $(".m2htlayBg,.m2htLayer2").fadeOut(300);
            });
            $(".m2htLbtn2").click(function () {
                $(".m2htlayBg,.m2htLayer2").fadeOut(300);
            });
        })
    </script>
</div>
</html>